import { CompanyStatus } from '@/pages/constant';
import useTableList from '@/utils/useTableList';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Col, Flex, Form, Input, Modal, Row, Select, Space, Table, Tag } from 'antd';
import React from 'react';
import styles from './index.less';
import {
  ExclamationCircleOutlined,
  PlusOutlined,
  ReloadOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import message from '@/utils/message';
import useEditModal from '@/utils/useEditModal';
import { addVehicleApi, editVehicleApi, getVehicleListApi } from '@/services/vehicle';

const Vehicle: React.FC = () => {
  const { loading, form, datasource, page, pageSize, total, onFinish, onPageChange } = useTableList(
    { fetchApi: getVehicleListApi },
  );

  const {
    loading: editLoading,
    form: editForm,
    currentData,
    setCurrentData,
    onOk,
    onCancel,
  } = useEditModal({
    editApi: editVehicleApi,
    addApi: addVehicleApi,
    successCb: () => onPageChange(page),
  });

  const changeStatus = (row: any) => {
    Modal.confirm({
      title: '温馨提示',
      icon: <ExclamationCircleOutlined />,
      content: '确定更改该条数据的状态吗？',
      okText: '确定',
      cancelText: '取消',
      centered: true,
      onOk: async () => {
        const { rsCode } = await editVehicleApi({
          id: row.id,
          status: row.status === 2 ? 3 : 2,
        });
        if (rsCode === '00000000') {
          message.success('操作成功');
          onPageChange(page);
        }
      },
    });
  };

  const columns: ColumnsType<any> = [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',
      width: 100,
    },
    {
      title: '产品/零部件名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 150,
      render: (status: number) => {
        if (status === 1) {
          return <Tag color="gray">待生效</Tag>;
        } else if (status === 2) {
          return <Tag color="green">生效</Tag>;
        } else {
          return <Tag color="red">失效</Tag>;
        }
      },
    },
    {
      title: '是否新能源',
      dataIndex: 'isElectric',
      key: 'isElectric',
      width: 150,
      render: (isElectric: number) => {
        return isElectric === 1 ? <Tag color="#87d068">新能源</Tag> : <Tag color="red">否</Tag>;
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 150,
      align: 'center',
      fixed: 'right',
      render: (_, row) => {
        return (
          <Space>
            <Button
              type="primary"
              size="small"
              onClick={() => {
                setCurrentData({
                  name: row.name,
                  isElectric: row.isElectric || 0,
                  status: row.status,
                  id: row.id,
                });
              }}
            >
              编辑
            </Button>
            <Button
              color="primary"
              size="small"
              variant="outlined"
              onClick={() => changeStatus(row)}
            >
              {row.status === 2 ? '失效' : '生效'}
            </Button>
          </Space>
        );
      },
    },
  ];

  return (
    <PageContainer>
      <Row gutter={[30, 30]} style={{ padding: '15px 30px' }}>
        <div className={styles.search_box}>
          <Form
            form={form}
            onFinish={onFinish}
            onReset={() => onFinish({})}
            labelCol={{
              span: 6,
            }}
            style={{ width: '100%' }}
          >
            <Row gutter={[20, 20]}>
              <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}>
                <Form.Item label="名称" name="name">
                  <Input placeholder="请输入产品/零部件名称" />
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}>
                <Form.Item label="状态" name="status">
                  <Select options={CompanyStatus} placeholder="请选择" allowClear />
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12} lg={12} xl={8} xxl={6}>
                <Form.Item label="是否新能源" name="isElectric">
                  <Select
                    options={[
                      {
                        label: '是',
                        value: 1,
                      },
                      {
                        label: '否',
                        value: 0,
                      },
                    ]}
                    placeholder="请选择"
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col xs={24} sm={24} md={12} lg={12} xl={24} xxl={6}>
                <Flex align="center" justify="flex-end" gap={15}>
                  <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                    查询
                  </Button>
                  <Button htmlType="reset" icon={<ReloadOutlined />}>
                    重置
                  </Button>
                  <Button
                    color="primary"
                    variant="outlined"
                    icon={<PlusOutlined />}
                    onClick={() => setCurrentData({})}
                  >
                    新增
                  </Button>
                </Flex>
              </Col>
            </Row>
          </Form>
        </div>
        <div className={styles.table_box}>
          <Table
            columns={columns}
            dataSource={datasource}
            loading={loading}
            rowKey="id"
            scroll={{ x: 800 }}
            pagination={{
              current: page,
              pageSize: pageSize,
              total: total,
              showSizeChanger: false,
              showQuickJumper: true,
              onChange: onPageChange,
              showTotal: (total) => `共 ${total} 条数据`,
            }}
          />
        </div>
      </Row>
      <Modal
        title={currentData?.id ? '编辑公司品牌' : '新增公司品牌'}
        centered
        width={600}
        open={!!currentData}
        onCancel={onCancel}
        onOk={onOk}
        okButtonProps={{ loading: editLoading }}
      >
        <Form
          form={editForm}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 17 }}
          style={{ padding: '20px 0' }}
          onFinishFailed={(e) => console.log(e)}
        >
          <Form.Item label="ID" name="id" hidden />
          <Form.Item
            label="产品/零部件名称"
            name="name"
            rules={[{ required: true, message: '请输入产品/零部件名称称' }]}
          >
            <Input placeholder="请输入产品/零部件名称" />
          </Form.Item>
          <Form.Item
            label="状态"
            name="status"
            rules={[{ required: true, message: '请选择状态' }]}
            initialValue={2}
          >
            <Select options={CompanyStatus} placeholder="请选择状态" />
          </Form.Item>
          <Form.Item label="新能源" name="isElectric" initialValue={0}>
            <Select
              options={[
                {
                  label: '是',
                  value: 1,
                },
                {
                  label: '否',
                  value: 0,
                },
              ]}
              placeholder="请选择"
              allowClear
            />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
};

export default Vehicle;
